<!DOCTYPE html>
<html>

<!-- -----------------------------------标题----------------------------------------  -->
	<head>
		<meta charset="UTF-8">
		<title>*** The universe ***</title>
        <link rel="stylesheet" href="./mian_style.css">
	</head>


<!-- -----------------------------------内容----------------------------------------  -->
    <body onload="my_onload()">

        <!-- -------------------------------工具栏--------------------------------  -->
        <div class="top-bar">
            <div class="box-top">
                <ul class="top-ui">
                    <li><a href="./main.html">首页</a></li>
                    <li><a href="./Find_alians.html">寻找外星人</a></li>
                    <li><a href="./other_universe.html">其他宇宙</a></li>
                </ul>
            </div>
        </div>

        <!-- -----------------------------右上角标题--------------------------------  -->

        <h1>我的宇宙</h1>
        <p1>My Universe</p1>

        <!-- -------------------------------星球--------------------------------  -->

        <div class="planet" id="planet">
            
            <div class="ball" id="ball">
                <img class="core" id="core" src="./图像/planet/earth.png" width="600" height="600" >
                <canvas class="architecture" id="architecture" width="500" height="500"></canvas>
            </div>

            <div class="ball_info" id="ball_info">
                <h7>星球详情</h7>
                <script type="text/javascript" src="./planet_onclick.js"></script>
            </div>
            
            <img class="cloud_front" id="cloud" src="./图像/cloud/earth.png" width="650" height="650">
            <img class="cloud_back" id="cloud" src="./图像/cloud/earth_back.png" width="600" height="600">
            <img class="cloud_out" id="cloud" src="./图像/cloud/earth_out.png" width="600" height="600">
            
        </div>

        <div class="moon">
            <img class="ball" src="./图像/planet/moon.png" width="50" height="50">        
        </div>

        <!-- -------------------------------星星--------------------------------  -->
        <div class="stars" id="stars">
            <script src="./star_blink.js"></script>
            <canvas id="can" width="1800" height="600"></canvas>
        </div>

        <!-- -------------------------------信息框--------------------------------  -->

        <div class="info" id="info">
            <canvas class="information" id="info_canvas" width="600" height="500"></canvas>
            <div class="info_img">
                <img src="./图像/earth_text.png" width="0" height="250" id="info_img">
            </div>
        </div>

        <!-- -------------------------------音乐--------------------------------  -->

        <div class="music" id="music">
            <script src="./music.js"></script>
            <img class="music_img" id="music_img" src="./图像/music_front.png" width="50" height="50">
            <img class="music_state" id="music_state" src="./图像/start.png" width="50" height="50">
            <audio id="bgmusic" src="./音乐/杨舒怀 - 夏夜萤火.mp3" loop="true"></audio>
            <p2>BGM : 夏日萤火</p2>
        </div>


        <!-- -------------------------------左上角数据--------------------------------  -->
        <div class="statistic">

            <h2>人口:</h2>
            <img id="population" src="./图像/图标/po.png" width="50" height="50">
            <h3>资源:</h3>
            <img class="resource" id="" src="./图像/图标/res.png" width="50" height="50">
            <h4>科技:</h4>
            <img class="tecnology" id="tecnology" src="./图像/图标/tec.png" width="50" height="50">

            <div class="reset" id="reset">
                <h5>重置点数</h5>
                <img class="reset_icon" id="reset_icon" src="./图像/图标/reset.png" width="20" height="20">
                <script type="text/javascript" src="./statistic.js"></script>
            </div>

        </div>


        <!-- -------------------------------商店--------------------------------  -->
        <div class="shop" id="shop">
            <h6>点数商店</h6>
            
            <img class="lab" id="lab" src="./图像/建筑/luxury-house-building-vecto.png" width="50" height="30">
            <div class="lab_buy" id="lab_buy">
                <h8 id="lab_need"></h8>
            </div>
            
            <img class="rocket_pla" id="rocket_pla" src="./图像/建筑/Rocket-Platform.png" width="50" height="50">
            <div class="rocket_buy" id="rocket_buy">
                <h9 id="rocket_need"></h9>
            </div>
            
            <img class="high_tec" id="high_tec" src="./图像/建筑/airport-building-exterior-v.png" width="50" height="50">
            <div class="high_buy" id="high_buy">
                <h10 id="high_need"></h10>
            </div>
            
            <img class="ai" id="ai" src="./图像/建筑/AI.png" width="50" height="50">
            <div class="ai_buy" id="ai_buy">
                <h11 id="ai_need"></h11>
            </div>

            <script src="./shop.js"></script>
        </div>







    </body>

</html>
